<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom,'dark');
    var app = {};
    var option;
    option = {
        title: {
            text: '休息日平均每小时的租车情况',
            subtext: '子查询',
            left: 150,
            top: 150,
            fontSize: 60
        },
        angleAxis: {
            type: 'category',
            data: ['0h', '1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h']
        },
        radiusAxis: {},
        polar: {},
        series: [{
            type: 'bar',
            data: [16, 12, 10, 6, 2, 1, 3, 8, 20, 45, 80, 108, 128, 139, 143, 141, 132, 115, 86, 67, 46, 36, 28, 20],
            coordinateSystem: 'polar',
            name: 'casual',
            stack: 'a'
        }, {
            type: 'bar',
            data: [77, 59, 45, 20, 6, 6, 13, 30, 79, 126, 181, 213, 245, 240, 229, 226, 228, 211, 195, 165, 127, 105, 88, 68],
            coordinateSystem: 'polar',
            name: 'registered',
            stack: 'a'
        }],
        legend: {
            show: true,
            data: ['casual', 'registered'],
            top: 10
        }
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>
</body>
</html>